<template>
  <div class="tab" v-loading="load">
    <div class="head-name">
      <div class="head-title">
        <div class="head-label">
          <svg-icon icon-class="contact-name" class="icons" />
          {{ type === '1' ? '销售' : '采购' }}合同名称:
        </div>
        {{ contractInfo?.baseInfo?.contractName }}
      </div>

      <div class="head-btn">
        <el-button
          type="success"
          icon="CircleCheck"
          @click="complete"
          v-if="!contractInfo?.showIf && ifEnd === '履行中'"
        >
          合同履行完毕
        </el-button>
        <el-button
          type="danger"
          icon="CircleClose"
          @click="cancel"
          v-if="!contractInfo?.showIf && ifEnd === '已完成'"
        >
          取消合同履行完毕
        </el-button>
      </div>
    </div>
    <el-tabs type="border-card">
      <el-tab-pane label="合同收付款信息">
        <ContractInfo ref="contractInfo" @getAllData="getAllData" :ifEnd="ifEnd"></ContractInfo>
        <Money ref="money"></Money>
        <PointTab ref="pointTab" @getAllData="getAllData" :ifEnd="ifEnd"></PointTab>
        <div class="contant">
          <div class="left">
            <SituationTab ref="situationTab" @getAllData="getAllData" :ifEnd="ifEnd"></SituationTab>
          </div>
          <div class="right">
            <TicketTab ref="ticketTab" @getAllData="getAllData" :ifEnd="ifEnd"></TicketTab>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="合同内容">
        <ContractGoods :ifEnd="ifEnd"></ContractGoods>
      </el-tab-pane>
    </el-tabs>
    <EndDrawer ref="endDrawer" @getData="getAllData" />
  </div>
</template>

<script lang="ts" setup>
  import ContractInfo from './contactInfo/index.vue'
  import Money from './money/index.vue'
  import TicketTab from './ticketTab/index.vue'
  import SituationTab from './situationTab/index.vue'
  import PointTab from './pointTab/index.vue'
  import ContractGoods from './contractGoods/index.vue'
  import EndDrawer from './contactInfo/components/endDrawer.vue'
  import { useTagsViewStore } from '@/store/modules/tagsView'
  import { putMarketingContract } from '@/api/controller/marketing-contract-controller/index'
  import { putProcurementContract } from '@/api/controller/procurement-contract-controller/index'
  import { ref, onMounted } from 'vue'
  import { ElMessageBox, ElMessage } from 'element-plus'
  const load = ref(false)
  const contractInfo = ref()
  const money = ref()
  const pointTab = ref()
  const situationTab = ref()
  const ticketTab = ref()
  const type = ref(history.state?.contractType)
  const ifEnd = ref()
  const contractId = ref(history.state?.contractId)
  const getAllData = async () => {
    try {
      load.value = true
      await contractInfo.value.getData()
      await money.value.getData()
      await pointTab.value.getData()
      await situationTab.value.getData()
      await ticketTab.value.getData()
      ifEnd.value = contractInfo.value.baseInfo.contractState
    } finally {
      load.value = false
    }
  }

  const TagsViewStore = useTagsViewStore()
  //初始化
  onMounted(async () => {
    TagsViewStore.setHistory(history.state)
    type.value = history.state.contractType
    await getAllData()
  })

  //完成合同抽屉
  const endDrawer = ref()
  const complete = () => {
    endDrawer.value.show()
  }

  //取消完成合同
  const cancel = () => {
    ElMessageBox.confirm('确定取消合同履行完毕吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(async () => {
      let result
      if (type.value === '1') {
        result = await putMarketingContract(
          { id: contractId.value, contractState: '履行中' },
          { loading: true },
        )
      } else {
        result = await putProcurementContract(
          { id: contractId.value, contractState: '履行中' },
          { loading: true },
        )
      }
      if (result.code === 200) {
        await getAllData()
        ElMessage.success('更新成功')
      }
    })
  }
</script>

<style lang="scss" scoped>
  .tab {
    width: 96%;
    margin: 20px 2% 20px 2%;
    :deep(.el-tabs__content) {
      background-color: #f0f2f5;
      padding: 0;
    }
    .head-name {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: white;
      margin: 0 0 6px 0;
      padding: 14px;
      border-radius: 6px;
      box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
      .head-title {
        display: flex;
        align-items: center;
        .head-label {
          display: flex;
          align-items: center;
          font-size: 16px;
          font-weight: 600;
          margin-right: 6px;
          .icons {
            width: 20px;
            height: 20px;
            margin-right: 6px;
          }
        }
      }
    }
  }
  .contant {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 20px 0 0px 0;
    .left {
      padding: 2%;
      width: 45%;
      background-color: white;
      border-radius: 6px;
      box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
    }
    .right {
      padding: 2%;
      width: 45%;
      background-color: white;
      border-radius: 6px;
      box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
    }
  }
</style>
